<template>
  <div id="line-chart">
    <div class="line-chart-title">中小学离退休人数预测</div>
    <div id="stackedLine"></div>
  </div>
</template>

<script>
export default {
  name: 'stackedLine',

  data() {
    return {
      option: {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          x: 'center',      //可设定图例在左、右、居中
          y: 'bottom',     //可设定图例在上、下、居中
          padding: [0, 50, 0, 0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
                    textStyle: {
            fontSize: 16,//字体大小
            color: '#ffffff'
          },
          data: ['周转编制', '事业编制', '聘用教师控制数']
        },
        grid: {
          top: '30',
          left: '30',
          right: '30',
          bottom: '60',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2022', '2023', '2024', '2025', '2026'],
          axisPointer: {
            type: 'shadow'
          },
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 14,//字体大小
              color: '#f0f0f0'
            }
          }
        },
        yAxis: {
          type: 'value',
          show: true,
          name: '',
          nameTextStyle: {
            fontSize: 14,//字体大小
            color: '#ffffff'
          },
          // 分割线
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#3399ff'
            }
          },
          axisLabel: {
            formatter: '{value} ',
            show: false,
            textStyle: {
              fontSize: 16,//字体大小
              color: '#ffffff'
            }
          }
        },
        series: [
          {
            name: '退休人数',
            type: 'line',
            stack: 'Total',
            data: [40, 72, 88, 134, 157],
            itemStyle: {
              normal: {
                color: '#FCC708', //柱状颜色
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: { //数值样式
                    color: '#ffffff',
                    fontSize: 14
                  }
                }
              }
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.initEchart();
  },
  methods: {
    initEchart() {
      var chartDom = document.getElementById('stackedLine');
      var myChart = this.$echarts.init(chartDom);
      myChart.setOption(this.option);
    }
  }
}
</script>

<style lang="scss">
#line-chart {
  width: calc(50% - 15px);
  height: 100%;
  box-sizing: border-box;
  background-color: rgba(1, 35, 102, 0.8);
  margin-bottom: 15px;
  border-radius: 20px;

  .line-chart-title {
    font-size: 18px;
    color: #fdfdfd;
    line-height: 18px;
    font-weight: 600;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

#stackedLine {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
</style>
